<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" class="user" >
    <input type="text" class="password">
    <button>注册</button>
    <script>
        document.querySelector('button').addEventListener('click',()=>{
            // 获取表单的值
            let user = document.querySelector('.user').value;
            let password = document.querySelector('.password').value;
            let xhr = new XMLHttpRequest;
            xhr.open('POST','server/ajax_json.php');
            // 设置请求头 注意一定要在open与send之间
            xhr.setRequestHeader('Content-Type','application/json');
            // 向要发送JSON格式的请求，如果自己进行字符串拼接会比较麻烦.所以平常组装请求参数时都是先用内置的对象或者数组，然后组装完毕 统一转换为JSON格式的字符串
            let body = {username:user,pwd:password};
            // 发送请求 因为post请求并且需要携带用户名与密码 所以send需要设置参数 并且参数为字符串
            xhr.send(JSON.stringify(body));
            
            xhr.onload = function(){
                // 服务是不论出现什么情况(语法报错除外) 永远是JSON格式
                try {
                    let response = JSON.parse(xhr.responseText);
                    if(response.code != 200){
                        alert(response.msg);
                    }else{
                        console.log('ok')
                    }
                    

                } catch (error) {
                    alert('网络异常！请检查是否联网');
                }
            }
        })
    </script>
</body>
</html>